@keyframes dog {
  0% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog1.png) no-repeat;
    background-size: contain;
  }
  9% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog2.png) no-repeat;
    background-size: contain;
  }
  18% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog3.png) no-repeat;
    background-size: contain;
  }
  27% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog4.png) no-repeat;
    background-size: contain;
  }
  36% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog5.png) no-repeat;
    background-size: contain;
  }
  45% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog6.png) no-repeat;
    background-size: contain;
  }
  54% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog7.png) no-repeat;
    background-size: contain;
  }
  63% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog8.png) no-repeat;
    background-size: contain;
  }
  72% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog9.png) no-repeat;
    background-size: contain;
  }
  81% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog10.png) no-repeat;
    background-size: contain;
  }
  90% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog11.png) no-repeat;
    background-size: contain;
  }
  100% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog12.png) no-repeat;
    background-size: contain;
  }
}

.container {
  width: 6.4rem;
  height: 11.36rem;
  background: url(../images/bg-question.png) no-repeat;
  background-size: contain;
  position: relative;
  overflow: hidden;
}

.container .question {
  width: 5.5rem;
  height: auto;
  margin: 0 auto;
  margin-top: 1.04rem;
}

.container .question .content {
  font-size: .3333rem;
  color: #fff;
  text-align: left;
}

.container .question .pic {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  z-index: 10;
}

.container .answer {
  position: absolute;
  top: 6.83rem;
  right: auto;
  bottom: auto;
  left: 0.58rem;
}

.container .answer .ans1 {
  width: 3.68rem;
  height: 0.63rem;
  background: url(../images/selection.png) no-repeat;
  background-size: contain;
  margin-bottom: .28rem;
  display: block;
  font-size: .2752rem;
  line-height: .5rem;
  padding-left: .23rem;
}

.container .answer .ans2 {
  width: 3.68rem;
  height: 0.63rem;
  background: url(../images/selection.png) no-repeat;
  background-size: contain;
  margin-bottom: .28rem;
  display: block;
  font-size: .2752rem;
  line-height: .5rem;
  padding-left: .23rem;
}

.container .answer .ans3 {
  width: 3.68rem;
  height: 0.63rem;
  background: url(../images/selection.png) no-repeat;
  background-size: contain;
  margin-bottom: .28rem;
  display: block;
  font-size: .2752rem;
  line-height: .5rem;
  padding-left: .23rem;
}

.container .answer .ans4 {
  width: 3.68rem;
  height: 0.63rem;
  background: url(../images/selection.png) no-repeat;
  background-size: contain;
  margin-bottom: .28rem;
  display: block;
  font-size: .2752rem;
  line-height: .5rem;
  padding-left: .23rem;
}

.container .answer .selected {
  background-image: url(../images/selected.png);
}

.container .cloud {
  width: 6.4rem;
  height: 1.45rem;
  background: url(../images/cloud-group.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 4.17rem;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
}

.container .symbol {
  position: absolute;
  top: 7.13rem;
  right: auto;
  bottom: auto;
  left: 4.77rem;
}

.container .symbol .dog {
  width: 0.85rem;
  height: 1rem;
  position: absolute;
  top: 2.66rem;
  right: auto;
  bottom: auto;
  left: -0.07rem;
  background-size: contain;
  animation: dog 3s steps(1) infinite;
}

.container .symbol .note {
  width: 1.12rem;
  height: 3.53rem;
  background: url(../images/notes.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0.22rem;
  right: auto;
  bottom: auto;
  left: 0.63rem;
}
